<template>
    <div class="meeting">
        <div class="left">
            <div style="height: 3vh;"></div>
            <el-select v-model="id" placeholder="请选择会议" size="large" style="width: 40vw;" @change="changeHandle">
                <el-option v-for="item in meetingList" :key="item.id" :label="item.meetName" :value="item.meetId" />
            </el-select>
            <div class="code">
                <img :src="imgUrl" alt="">
            </div>
        </div>
        <div class="right">
            <ul>
                <!-- <li v-for="item in 100">【{{ '高田预' }}】打卡成功!</li> -->
                <li v-for="item in rightList">【{{ item.teacherName }}】打卡成功!</li>
            </ul>
        </div>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { formatTime } from "@/utils/dateFormat";
import { ElMessage } from 'element-plus'
import { ArrowDown } from "@element-plus/icons-vue";
import { API_BASE_URL } from '../../constants';

export default {
    name: "signIn",
    data() {
        return {
            flag: true,
            passward: '',
            number: '',
            meeting: '今日会议',
            meetingList: [],
            selectData: {},
            meetingFalg: false,
            leftList: {},
            rightList: {},
            imgUrl: '',
            timer: null,
            timer1: null,
            startdate: '',
            id: "",
        };
    },
    components: {
        ArrowDown
    },
    mounted() {
        this.startdate = formatTime(new Date())

        this.getMeetingList()
    },
    computed: {
        filteredArray() {
            return this.a.filter(item => this.b.some(bItem => bItem.name === item.name));
        }
    },
    watch: {
        id(newValue) {
            console.log(newValue);
            const obj = this.meetingList.filter(item => item.meetId == newValue)[0]
            this.selectMeet(obj)
        },
    },
    methods: {

        changeHandle(value) {
            console.log(this.id);
        },
        getMeetingList() {
            httpService("/javaApi/schoolMeetingList/list/1/100", { "campus": 1 }, "get").then(
                (data) => {
                    this.meetingList = data.list.filter(item => {
                        const time = formatTime(new Date(item.startTime))
                        return time == this.startdate
                    })
                    // console.log(this.meetingList);
                    if (this.meetingList.length > 0) {
                        this.selectMeet(this.meetingList[0])
                    }

                }
            );
        },

        selectMeet(data) {
            // console.log(data);
            this.selectData = data
            this.id = data.meetId
            this.getConferee(this.selectData.meetId)
            this.getQrCode(this.selectData.meetId)
            if (this.timer) {
                clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
                this.getQrCode(this.selectData.meetId)
            }, 2000)
            if (this.timer1) {
                clearInterval(this.timer1);
            }
            this.timer1 = setInterval(() => {
                this.getConferee(this.selectData.id)
            }, 2000)

        },

        getConferee(id) {
            httpService("/javaApi/schoolMeetingList/listAllTeacher", { 'id': id, }, "get").then(
                (data) => {
                    const arr = ["高巧玲", "李懂硕", "蔡荣海", "张辉彦", "高田预", "李伟娜", "王亮", "李巧娥", "李建军", "李士欣"]
                    if (data.leftList) {
                        this.leftList = data.leftList.filter(item => arr.every(bItem => bItem != item));
                        const sortedList = this.leftList.sort((a, b) => {
                            const getOrder = (str) => {
                                if (str.includes('（校）')) return 1;
                                if (str.includes('（正）')) return 2;
                                if (str.includes('（列）')) return 3;
                                return 4; // 如果有其他的标记，放在最后
                            };
                            return getOrder(a) - getOrder(b);
                        });
                    }

                    if (data.rightList) {
                        this.rightList = data.rightList.filter(item => arr.every(bItem => bItem.teacherName != item));
                    }
                }
            );
        },

        getQrCode(id) {
            let randomNum = Math.floor(Math.random() * 9) + 1;
            let mettingId = randomNum + '' + id
            let time = new Date().getTime()
            httpService(`/javaApi/schoolMeetingList/getQrCode/${mettingId}`, {}, "get").then(
                (data) => {
                    this.imgUrl = API_BASE_URL + data.message
                    // this.imgUrl = API_BASE_URL + '/javaApi' + data.message + '?time=' + time
                }
            );
        },

        login() {
            if (this.number == '' || this.passward == '') {
                ElMessage.error('账号或密码不能为空')
            } else if (this.number != 123 && this.passward != 123) {
                ElMessage.error('账号或密码错误')
            } else if (this.number == 123 && this.passward == 123) {
                this.flag = true
            }
        },

        realTimeSwitch() {
            timer1 = setInterval(() => {
                clearInterval(timer1)
                this.getConferee(this.selectData.meetId)
                this.getQrCode(this.selectData.meetId)
            }, 5000)
        },
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.meeting {
    width: 100vw;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgb(255, 255, 255);
    position: relative;
    display: flex;
    align-items: center;
}

.left {
    width: 70vw;
    height: 100vh;
    /* overflow-y: auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 2px solid #878686;
}

.code {
    width: 40vw;
    height: 40vw;
    margin-top: 3vh;
}

.code img {
    width: 100%;
    height: 100%;
}

.right {
    width: 30vw;
    height: 100vh;
    /* padding-top: 50px; */
    /* background-color: chocolate; */
}

.right ul {
    width: calc(30vw - 100px);
    min-width: 300px;
    height: calc(100vh - 20px);
    padding: 10px 0;
    margin-left: 100px;
    list-style: none;
    overflow-y: auto; 
}

.right ul li {
    line-height: 50px;
    font-size: 25px;
    text-shadow: 0 0 5px #eaf5fe,
        /* 紫色光晕 */
        0 0 10px #eaf5fe,
        0 0 15px #eaf5fe,
        0 0 20px #eaf5fe;
    color: #299af4;
    animation: glow 0.5s infinite alternate;
}

::v-deep .el-select__wrapper {
    margin: 0 auto;
    /* width: 40vw; */
    height: 50px;
}

.el-select-dropdown__item {
    padding-left: 15px;
}



@keyframes glow {
    0% {
        text-shadow: 0 0 5px #92c8f5, 0 0 10px #92c8f5, 0 0 15px #92c8f5;
    }

    100% {
        text-shadow: 0 0 20px #92c8f5, 0 0 30px #92c8f5, 0 0 40px #92c8f5;
    }
}
</style>